import React from "react";
import {Map, MouseTool } from "react-amap";
import BaseComponent from "components/Base/BaseComponent";

export default class extends BaseComponent {

  constructor() {
    super();
    const self =this;
    this.amapEvents = {
      created: (mapInstance) => {
        console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
        console.log("map", mapInstance, mapInstance.Geocoder);

        this.setState({"map": mapInstance});

      }
    };
    this.markerEvents = {
      created: (markerInstance) => {
        console.log('高德地图 Marker 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
        console.log(markerInstance.getPosition());
      }
    };
  }

  componentDidMount() {

    window.geocoder.getLocation('上海', (status, result) => {
      console.log('上海');
      if (status === 'complete' && result.geocodes.length) {
        console.log(result)
        const lnglat = result.geocodes[0].location;

        const lat = lnglat.lat;
        const lng = lnglat.lng;
        console.log(lat, lng);

      } else {
        console.log(result)
      }
    });
  }

  render() {

    const plugins = [
      'Scale',
      {
        name: 'ToolBar',
        options: {
          visible: true,  // 不设置该属性默认就是 true
          onCreated(ins) {
            console.log(ins);
          },
        },
      }
    ];

    const mapProps = {
      version: '1.4.15',
      amapkey: '2d414d215b304de20e3863a1bc3afc76',
      plugins,
      events: this.amapEvents,
      ...this.props,
    }

    return (
      <Map {...mapProps}>
        {this.props.children}
      </Map>
    );
  }

}
